<template>
 <div>
     <el-button type="primary" class="b1" icon="el-icon-plus" @click="add()">添加</el-button>
     <el-dialog
             id="dialog"
             :append-to-body="true"
             title="添加图书"
             :visible.sync="centerDialogVisible"
             width="50%"
             center>


         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

             <el-form-item label="编号" prop="isbn">
                 <el-input :disabled="dis" v-model="ruleForm.isbn"></el-input>
             </el-form-item>

             <el-form-item label="书名" prop="bookName">
                 <el-input v-model="ruleForm.bookName"></el-input>
             </el-form-item>

             <el-form-item label="作者" prop="author">
                 <el-input v-model="ruleForm.author"></el-input>
             </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save(flag,'ruleForm')">确 定</el-button>
     </span>
     </el-dialog>

     <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="搜索">
             <el-input v-model="formInline.user" placeholder="搜索"></el-input>
         </el-form-item>
         <el-form-item label="搜索方式">
             <el-select v-model="formInline.region" placeholder="书名">
                 <el-option label="书名" value="name"></el-option>
                 <el-option label="作者" value="author"></el-option>
             </el-select>
         </el-form-item>
         <el-form-item>
             <el-button type="primary" @click="onSubmit">搜索</el-button>
         </el-form-item>
     </el-form>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="编号"
                width="180">
            <!--  使用slot-scope   获取 tableData值      -->
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.isbn }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="书名"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.bookName }}</span>

            </template>
        </el-table-column>
        <el-table-column
                label="作者"
                width="180">
           <!--            -->
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.author }}</span>

            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div id="page1">
        <el-pagination
                background
                layout="prev, pager, next"
                page-size="4"
                @current-change="currentPage"
                :total="total">
        </el-pagination>
    </div>
 </div>
</template>
<style>
    .el-input{
        width: 35%;
    }
    .b1{
        float: left;
    }
    #page1{
        float: left;
        margin-top: 20px;
    }
</style>
<script>
    export default {
        created(){
            const _this = this;
            axios.defaults.withCredentials = true;

            this.getData(1)
            // //请求后端数据
            // axios.get('http://localhost:8081/books/1/4').then(resp => {
            //     _this.tableData = resp.data.list;
            //     console.log(resp.data.list)
            // })
        },
        data() {
            return {   //双向绑定
                flag:null,
                dis:null,
                pageSize:null,
                total:null,
                tableData: {
                    isbn:'',
                    bookName:'',
                    author:'',
                },
                formInline: {
                    user: '',
                    region: ''
                },
                centerDialogVisible: false,
                ruleForm: {
                    isbn:'',
                    bookName:'',
                    author:'',
                },
                //校验规则
                rules: {
                    isbn: [
                        { required: true, message: '请输入编号', trigger: 'blur' },
                    ],
                    bookName: [
                        { required: true, message: '请输入书名', trigger: 'blur' },
                    ],
                    author: [
                        { required: true, message: '请输入作者', trigger: 'change' }
                    ]

                }
            }
        },
        methods: {
            add(){
                this.centerDialogVisible = true;
                this.flag = 1;
                this.dis = false
                this.ruleForm.isbn = null;
                this.ruleForm.author = null
                this.ruleForm.bookName = null
            },


            save(flag,ruleForm){
                if(flag == 1) {
                    //this 操作
                    const _this = this;
                    //数据校验
                    this.$refs[ruleForm].validate((valid) => {
                            if (valid) {
                                this.centerDialogVisible = false;
                                //直接传递对象
                                //function (resp){} 中的this 指的是 function这个方法

                                //resp => {} 中的this 指的是 vue的this
                                axios.post('http://localhost:8081/book/add', this.ruleForm).then(function (resp) {
                                    if (resp.data == 'success') {
                                        _this.$message({
                                            message: '图书添加成功!',
                                            type: 'success'
                                        })
                                    } else {
                                        _this.$message({
                                            message: '图书添加失败!!!',
                                            type: 'error'
                                        })
                                    }
                                }),
                                _this.getData(1);
                            } else {
                                this.centerDialogVisible = true;
                                return false;
                            }
                        }
                    );
                }
                else if(flag == 0){
                    //this 操作
                    const _this = this;

                    this.dis = true    //修改图书信息时，禁用编号输入
                    //数据校验
                    this.$refs[ruleForm].validate((valid) =>{
                            if(valid){
                                this.centerDialogVisible = false;
                                console.log(this.ruleForm.author + this.ruleForm.bookName)
                                //直接传递对象
                                axios.post('http://localhost:8081/book/updateBook',this.ruleForm).then(function (resp) {
                                    if(resp.data == 'success'){
                                        _this.$message({
                                            message: '图书修改成功!',
                                            type: 'success'
                                        })
                                    }else{
                                        _this.$message({
                                            message: '图书修改失败!!!',
                                            type: 'error'
                                        })
                                    }
                                })
                            }else {
                                this.centerDialogVisible = true;
                                return false;
                            }
                        }
                    );
                }
            },
            currentPage(currentPage){
               this.getData(currentPage)
            },
            getData(currentPage){
                const _this = this;
                console.log(currentPage)
                //请求后端数据
                axios.get('http://localhost:8081/books/'+currentPage+'/4').then(function (resp) {
                    _this.tableData = resp.data.list
                    _this.total = resp.data.total

                })
            },
            handleEdit(index, row){
                this.centerDialogVisible = true
                this.flag = 0;
                this.ruleForm.isbn = row.isbn;
                this.ruleForm.author = row.author
                this.ruleForm.bookName = row.bookName
                this.dis = true
            },
            handleDelete(index, row) {

                this.$confirm('是否删除该图书记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    axios.post('http://localhost:8081/book/deleteBook/' + row.isbn).then(resp => {
                            if (resp.data == 'success') {
                                this.$message({
                                    message: '图书删除成功!',
                                    type: 'success'
                                }),
                                this.getData(1);
                            } else {
                                this.$message({
                                    message: '图书删除成功!!!',
                                    type: 'error'
                                })
                            }
                        })



                }).catch(() => {

                });
                //直接传递对象

            }, onSubmit() {
                const _this = this
                const sel = this.formInline.region
                const user = this.formInline.user
                if(sel == 'name'){
                    axios.get('http://localhost:8081/book/name/'+user).then(function (resp) {
                        _this.tableData = resp.data.list
                        _this.total = resp.data.total
                    })
                }else if(sel == 'author'){
                    axios.get('http://localhost:8081/book/author/'+user).then(function (resp) {
                        _this.tableData = resp.data.list
                        _this.total = resp.data.total
                    })
                }
            }


        }
    }
</script>